<!DOCTYPE html>
<html>
 <head>
   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
   <script src="../../d3/d3.js"></script>
   <link rel="import" href="../tf-categorizer.html">
   <link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">

 </head>
 <body>
  <style>
  </style>
  <dom-module id="x-demo">
    <style>
      .container {
        width: 255px;
        padding: 10px;
        border: 1px solid var(--paper-indigo-900);
        border-radius: 5px;
        position: fixed;
      }
      :host {
        margin: 0px;
      }

      .categories {
        font-family: "RobotoDraft",Helvetica;
        margin-left: 300px;
        width: 500px;
        border: 1px solid var(--paper-indigo-500);
        border-radius: 5px;
      }

      .category {
        background-color: var(--paper-indigo-50);
        margin: 20px;
        padding: 20px;
        border-radius: 5px;
      }

      .cat-name {
        font-size: 20px;
      }

      .tag {
        border-radius: 5px;
        padding: 5px;
        margin: 5px;
        background-color: var(--paper-indigo-900);
        color: white;
      }
    </style>
    <template>
      <div class="container">
        <tf-categorizer categories="{{categories}}" tags="[[tags]]" id="demo"></tf-categorizer>
      </div>
      <div class="categories">
        <template is="dom-repeat" items="[[categories]]">
          <div class="category">
            <p class="cat-name">Category: <span>[[item.name]]</span></p>
            <div class="tags-container layout horizontal wrap">
              <template is="dom-repeat" items="[[item.tags]]">
                <span class="tag layout vertical center-center">[[item]]</span>
              </template>
            </div>
          </div>
        </template>
      </div>
    </template>
    <script>

    function tagsGenerator() {
      var tags = ["special1", "special2", "special3", "special4", "special5"];
      ["l1", "l2", "l3", "l4", "l5"].forEach(function(l) {
        ["foo", "bar", "baz", "boink", "zod", "specialx"].forEach(function(x) {
          tags.push(l + "/" + x);
        });
      });
      return tags;
    }

    Polymer({
      is: "x-demo",
      properties: {
        tags: { type: Array, value: tagsGenerator },
      },
    });
    </script>
  </dom-module>

  <x-demo id="demo"></x-demo>
 </body>
</html>
